<template>
	<view class="animated fadeIn faster">
		<view class="rangbg">
			<view :style="{'height': titleBarHeight + 'px','paddingTop':statusBarHeight+'px'}" class="d-flex d-flex-middle" style="margin-bottom: 300rpx;">
				<view class="d-flex d-flex-center" style="width: 80rpx;" @click="goBack">
					<text class="iconfont icon-31fanhui1 colorfff"></text>
				</view>
				<view class="d-flex d-flex-item d-flex-center"><text class="colorfff font30">刷题榜</text></view>
				<view style="width: 80rpx;"></view>
			</view>
			
			<view class="bg-fff rounded60 pt-5 px-3">
				<view class="d-flex d-flex-center mb-5">
					<view class="d-flex this-rank d-flex-middle d-flex-center" @click="clickTab('1')" :class="tab=='1'?'week-focus-bg':'week-common-bg'">本周榜单</view>
					<view class="d-flex pre-rank d-flex-middle d-flex-center" @click="clickTab('2')" :class="tab=='2'?'week-focus-bg':'week-common-bg'">上周榜单</view>
				</view>
				
				<view class="myrank d-flex d-flex-middle mb-5">
					<view class="d-flex d-flex-item d-flex-middle">
						<view class="d-flex d-flex-column font-bold mr-6" style="color: #D6893C;">
							<text class="font38">我的</text>
							<text class="font38">成绩</text>
						</view>
						<view class="d-flex d-flex-middle">
							<image class="rounded mr-2" style="width: 100rpx;height: 100rpx;" :src="info.my_weekly_performance.avatar"></image>
							<text class="color5c font30">{{info.my_weekly_performance.user_name}}</text>
						</view>
					</view>
					<view class="d-flex d-flex-middle d-flex-between" style="width: 200rpx;">
						<text class="color5c">暂未排名</text>
						<text class="color5c">{{info.my_weekly_performance.rank}}</text>
					</view>
				</view>
				
				<view class="d-flex mb-3">
					<view class="d-flex d-flex-center mr-8" style="width: 60rpx;">
						<text class="font-bold">排名</text>
					</view>
					<view class="d-flex-item pl-1">
						<text class="font-bold">姓名</text>
					</view>
					<view class="d-flex d-flex-center" style="width: 200rpx;">
						<text class="font-bold">答对题数</text>
					</view>
				</view>
				
				<view class="d-flex d-flex-middle mb-3" v-for="(ranks,rindex) in list" :key="rindex">
					<view class="d-flex d-flex-center mr-8" style="width: 60rpx;">
						<text :class="{'focusnum':rindex<3}">{{ranks.rank}}</text>
					</view>
					<view class="d-flex-item d-flex d-flex-middle">
						<image class="rounded mr-2" :src="ranks.avatar" style="width: 70rpx;height: 70rpx;"></image>
						<text class="color5c">{{ranks.user_name}}</text>
					</view>
					<view class="d-flex d-flex-center" style="width: 200rpx;">
						<text class="color5c">{{ranks.correct_count}}</text>
					</view>
				</view>
			
			</view>
			
		</view>
	</view>
</template>

<script>
	import { userApi } from '@/http/userApi.js'
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				tab:'1',
				list:[],
				info:{
					last_week:[],
					this_week:[],
					my_weekly_performance:{
						avatar: "https://convoy-1367427231.cos.ap-guangzhou.myqcloud.com/upload/rZ8WayCegKVej0NMDWZ0iLwM0G5Nk4ghzsG7Fb2L.png",
						correct_count: 4,
						rank: 2,
						user_id: "4",
						user_name: "hellowk"
					}
				}
			}
		},
		computed: {
		  ...mapState({
		    statusBarHeight: state => state.statusBarHeight,
		    menuButtonHeight: state => state.menuButtonHeight,
		    titleBarHeight: state => state.titleBarHeight,
		    avatar: state => state.avatar
		  })
		},
		onReady() {
			this.getRank()
		},
		methods: {
			clickTab(num){
				if(this.tab != num){
					this.tab = num
					this.list = num=='1'?this.info.this_week.merged_ranking:this.info.last_week.merged_ranking
				}
			},
			getRank(){
				let that = this
				userApi.rankQuestion('13').then((res)=>{
					console.log('res',res.this_week.merged_ranking)
					that.info = res
					that.list = res.this_week.merged_ranking
				})
			},
			goBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
.rangbg{
	background-image: url('https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/shuatibg.png');
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-size: 750rpx 600rpx;
	width: 750rpx;
	min-height: 100vh;
}
.this-rank{
	width: 200rpx;
	height: 60rpx;
	border-top-left-radius: 60rpx;
	border-bottom-left-radius: 60rpx;
	font-size: 30rpx;
}
.pre-rank{
	width: 200rpx;
	height: 60rpx;
	border-top-right-radius: 60rpx;
	border-bottom-right-radius: 60rpx;
	font-size: 30rpx;
}
.week-focus-bg{
	color: #ffffff;
	background-color: #3E8EFE;
}
.week-common-bg{
	color: #000000;
	background-color: rgba(62, 142, 254, 0.3);
}
.myrank{
	background-color: rgba(255, 195, 0, 0.3);
	border-radius: 20rpx;
	
	padding: 20rpx 30rpx;
}
.focusnum{
	color: #FFBC47;
	font-size: 46rpx;
	font-weight: 700;
}
</style>
